<template>
  <view>
    <nav-bar title="预约成功" :showLeftIcon='false' :customBack='false'></nav-bar>
    <view class="container">
      <u-icon name="checkmark-circle-fill" color="#52c41a" size="80"></u-icon>
      <view class="success">预约成功</view>
      <view class="text" v-for="(item, index) in textData" :key="index">{{ item.text }}</view>
    </view>
    <view class="btn_edit">
      <view class="btn_cont" @click="clickConfirm">
        确定
      </view>
    </view>
  </view>
</template>

<script>
  import NavBar from '../../components/nav-bar'
  export default {
    name: "orderSubmit",
    components: { NavBar },
    data() {
      return {
        mainHeight: '',
        textData: [
          { text: '您的服务时间将按照预约时间开始计算，' },
          { text: '请提前5分钟到店！' },
          { text: '预约信息可在小程序底部菜单-订单中查看' },
          { text: '服务后可对技师进行评价抽奖' }
        ]
      }
    },
    methods: {
      clickConfirm() {
        uni.switchTab({ url: '/pages/order/index' })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100vh;
    padding: 25% 10%;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: #FFF;

    .success {
      margin: 44rpx 0 27rpx 0;
      font-size: 50rpx;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
    }

    .text {
      font-size: 32rpx;
      font-weight: 400;
      letter-spacing: 0rpx;
      line-height: 46.34rpx;        
      color: rgba(102, 102, 102, 1);
    }
  }
</style>  